<div class="page-content" id="index_box" style="background:#EDF3F7; height: 100%; ">
	<div class="row" >

		<div class="col-xs-12 col-sm-12 col-md-12 padding0">
			
			<div class="col-xs-12 col-sm-12  padding0">
				<div class="jk_box">
				<div class="jk_box_title">用户及微站信息</div>
				<div class="clearfix">
					<table id="grid-table" class="table table-bordered table-hover">
						<tbody>
							
							<tr>
								<td width="140" style="background-color: #edf3f4;text-align: right;">在线已认证用户数</td>
								<td>{$router_info['online_user_count']}</td>
								<td width="140" style="background-color: #edf3f4;text-align: right;">已连接用户数</td>
								<td>{$router_info['clientcount']}</td>
							</tr>
							<tr>
								<td  width="140" style="background-color: #edf3f4;text-align: right;">历史最高认证人数</td>
								<td>{$max_log.user_total}({$max_log.date})</td>
								<td width="140" style="background-color: #edf3f4;text-align: right;">历史累计用户数</td>
								<td>{$sum_log}</td>
							</tr>
							<tr>
								<td width="140" style="background-color: #edf3f4;text-align: right;">今日已认证用户数</td>
								<td>{$today}</td>
								<td width="140" style="background-color: #edf3f4;text-align: right;">昨日已认证用户数</td>
								<td>{$yesterday}</td>
							</tr>
							<tr>
								<td width="140" style="background-color: #edf3f4;text-align: right;">产品数</td>
								<td>{$station.product_num}</td>
								<td width="140" style="background-color: #edf3f4;text-align: right;">新闻数</td>
								<td>{$station.new_num}</td>
							</tr>
							<tr>
								<td width="140" style="background-color: #edf3f4;text-align: right;">幻灯片数</td>
								<td>{$station.slide_num}</td>
								<td width="140" style="background-color: #edf3f4;text-align: right;">活动数</td>
								<td>{$station.activity_num.status0}/{$station.activity_num.status1}/{$station.activity_num.status2}(未开始/进行中/已结束)</td>
							</tr>
						</tbody>
					</table>

					
				
				</div>
			</div>
				
				
			</div>
			
			
			<div class="col-xs-12 col-sm-6 padding0" >
				<div class="jk_box">
					<div class="jk_box_title">今日新老访客分布</div>
					<div class="clearfix">
						<div style="height:275px; widht:100%;" id="container1"></div>
						
					</div>
				</div>
				
			</div>
			<div class="col-xs-12 col-sm-6 padding0" style="padding-left:15px;">
				<div class="jk_box">
					<div class="jk_box_title">今日终端类型分布</div>
					<div class="clearfix">
						<div style="height:275px; widht:100%;" id="container2"></div>
						
					</div>
				</div>
				
			</div>

			<div class="col-xs-12 col-sm-12 padding0">
				<div class="jk_box">
					<div class="jk_box_title">最近10天认证人数统计图</div>
					<div class="clearfix">
						<div style="height:240px; widht:100%;" id="container"></div>
						
					</div>
				</div>
				
			</div>
		</div>


</div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</div>

<SCRIPT TYPE="text/javascript">
	var top10 = {$top10};
	var chart_data = [], xAxis=[];
	$.each(top10, function(){
		chart_data.push(parseInt(this.login_total));
        xAxis.push(this.date);
	});
   

    create_chart(chart_data, xAxis);
    create_chart1({$new_old_count['new']}, {$new_old_count['old']});
    create_chart2({$device_type_count['Phone']}, {$device_type_count['Tablet']}, {$device_type_count['computer']});
	function create_chart(data, xAxis){ 
        $('#container').highcharts({
            title: {
                text: '',
                x: 0 //center
            },
            subtitle: {
                text: '',
                x: 0
            },
            xAxis: {
                categories: xAxis
            },
            yAxis: {
                title: {
                    text: '最近10天认证图(人)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '人'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                borderWidth: 0
            },
            series: [{
                name: '认证人数',
                data: data
            }]
        });
    }
    function create_chart1(new1, old){
    	$('#container1').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            type: 'pie'
	        },
	        title: {
	            text: ''
	        },
	        tooltip: {
	    	    formatter: function() {
	            	return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
	                         Highcharts.numberFormat(this.y, 0, ',') +' 个)';
	         	}
	        },
	        legend:{
            	layout:'vertical',
            	align:'right',
            	verticalAlign:'middle'
            },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                colors:[
	                	'#DF661A',
	                	'#2889B3'

	                ],
	                
	                showInLegend: true,
	                size:'100%',
	               
	                innerSize:'40%',
	                dataLabels: {
	                    enabled: false
	                    
	                }
	            }
	        },
	        series: [{
	           
	            name: '',
	            data: [
	                ['新访客',   new1],
	                ['老访客',   old]
	            ]
	        }]
	    });
    }
    function create_chart2(Phone, Tablet, computer){
    	$('#container2').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            type: 'pie',
           		
	        },
	        title: {
	            text: ''
	        },
	        tooltip: {
	    	    formatter: function() {
	            	return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
	                         Highcharts.numberFormat(this.y, 0, ',') +' 个)';
	         	}
	        },
	        legend:{
            	layout:'vertical',
            	align:'right',
            	verticalAlign:'middle'
            },
	         plotOptions: {
	            pie: {
	            	colors:[
	                	'#2789B3',
	                	'#53C94E',
	                	'#DE661A'

	                ],
	                allowPointSelect: true,
	                showInLegend: true,
	                cursor: 'pointer',
	                size:'100%',
	               
	                innerSize:'40%',
	                dataLabels: {
	                    enabled: false
	                   
	                }
	            }
	        },
	        series: [{
	        
	            name: '',
	            data: [
	                ['手机',   Phone],
	                ['平板',   Tablet],
	                ['电脑',   computer],
	            ]
	        }]
	    });
    }
	setInterval(function(){
		var w = $(window).height();
		var b = $('#index_box').css('height')
		if (w > parseInt(b)){
			$('#index_box').css('height', (w-100)+'px');
		}
	}, 500)
</SCRIPT>